<template>
  <div ref="EcharRef" style="width: 100%; height: 400px"></div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
//第一步：先在官网中的指令进行安装
// npm install echarts --save
//第二步：导入echarts
import * as echarts from "echarts";

export default defineComponent({
  //第三步：创建Dom结构（并且设定div的大小）用来echars图表
  //第四步：通过ref获取到创建的Dom结构 (！！！！！Dom加载完成的生命周期！！！！！)
  mounted() {
    const main = this.$refs.EcharRef;
    //第五步：初始化咱们的图表内容（到这里基础的引入工作已经完成了）
    const myChars = echarts.init(main);
    //第六步：需要配置对应的option数据可以采用对象拼接的数据
    //第七步：通过setOption进行数据的设置
    myChars.setOption(this.options);
  },
  //父组件传过来的数据
  props: {
    seriesOpeion: [Array, Object],
  },
  //使用计算属性进行合并
  computed: {
    options() {
      return Object.assign(this.baseOption, this.seriesOpeion);
    },
  },
  data() {
    return {
      /* 一些配置项的设置内容 */
      baseOption: {
        //标题
        titile: {
          text: "折线图",
        },
        //legend图例的设置 plain是横向排，scroll是垂直排（具体属性请对照官方文档）
        legend: {
          type: "plain",
          y:'bottom'
        },
        //X轴设置
        xAxis: {
          type: "category",
          name: "日期",
          data: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
        },
        //y轴数据
        yAxis: {
          type: "value",
          name: "数量",
        },
        //鼠标悬浮在图表上的tip提示(这里的trigger属性需要重视：axis是折线等，itme是扇形等)
        tooltip: {
          trigger: "axis",
        },
        //工具栏的对应设置，详细内容可以阅读文档
        toolbox: {
          feature: {},
        },
      },
    };
  },

});
</script>
